<!-- Copyright (c) 2019-2020 十三 all rights reserved. -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('NewBee商城-个人中心','personal')">
</head>
<link th:href="@{/mall/css/bootstrap-modal.css}" rel="stylesheet">
<body>
<header th:replace="mall/header::header-fragment"></header>
<!-- nav -->
<nav th:replace="mall/header::nav-fragment"></nav>

<!-- personal -->
<div id="personal">
    <div class="self-info center">

        <!-- sidebar -->
        <div th:replace="mall/personal-sidebar::sidebar-fragment"></div>

        <div class="intro fr">
            <div class="grzlbt ml40">我的资料 <a href="javascript:openUpdateModal();"
                                             style="color:#1baeae;margin-left: 600px;">更改个人信息</a>
            </div>
            <div class="info_item ml40"><span>昵称</span><span
                    th:text="${session.newBeeMallUser.nickName}">newbee-mall</span>
            </div>
            <div class="info_item ml40"><span>手机号</span><span
                    th:text="${session.newBeeMallUser.loginName}">newbee-mall</span>
            </div>
            <div class="info_item ml40"><span>密码</span><span>******</span>
            </div>
            <div class="info_item ml40"><span>个性签名</span><span
                    th:text="${session.newBeeMallUser.introduceSign==''?'无':session.newBeeMallUser.introduceSign}">newbee-mall</span>
            </div>
            <div class="info_item ml40"><span>收货信息</span><span
                    th:text="${session.newBeeMallUser.address==''?'无':session.newBeeMallUser.address}">newbee-mall</span></span>
            </div>

        </div>
        <div class="clear"></div>
    </div>
    <div class="content">
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="personalInfoModal" tabindex="-1" role="dialog"
             aria-labelledby="personalInfoModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h6 class="modal-title" id="personalInfoModalLabel">个人信息修改</h6>
                    </div>
                    <div class="modal-body">
                        <form id="personalInfoForm">
                            <div class="form-group">
                                <label for="nickName" class="control-label">昵称:</label>
                                <input type="hidden" id="userId" th:value="${session.newBeeMallUser.userId}">
                                <input type="text" class="form-control" id="nickName" name="nickName"
                                       placeholder="请输入昵称" th:value="${session.newBeeMallUser.nickName}"
                                       required="true">
                            </div>
                            <div class="form-group">
                                <label for="introduceSign" class="control-label">个性签名:</label>
                                <input type="text" class="form-control" id="introduceSign" name="introduceSign"
                                       placeholder="请输入个性签名" th:value="${session.newBeeMallUser.introduceSign}"
                                       required="true">
                            </div>
                            <div class="form-group">
                                <label for="address" class="control-label">收货信息:</label>
                                <input type="text" class="form-control" id="address" name="address"
                                       placeholder="请输入收货信息" th:value="${session.newBeeMallUser.address}"
                                       required="true">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveButton">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal -->
    </div>
</div>

<div th:replace="mall/footer::footer-fragment"></div>

<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 3 -->
<script th:src="@{/mall/js/bootstrap3.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    function openUpdateModal() {
        $('#personalInfoModal').modal('show');
    }

    //绑定modal上的保存按钮
    $('#saveButton').click(function () {
        var address = $("#address").val();
        if (address.trim().length < 10) {
            swal("请输入正确的收货信息", {
                icon: "error",
            });
            return;
        }
        var introduceSign = $("#introduceSign").val();
        if (introduceSign.trim().length < 4) {
            swal("请输入正确的个性签名", {
                icon: "error",
            });
            return;
        }
        var nickName = $("#nickName").val();
        if (nickName.trim().length < 2) {
            swal("请输入正确的昵称", {
                icon: "error",
            });
            return;
        }
        var userId = $("#userId").val();
        var data = {
            "userId": userId,
            "address": address,
            "introduceSign": introduceSign,
            "nickName": nickName
        };
        $.ajax({
            type: 'POST',//方法类型
            url: '/personal/updateInfo',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.resultCode == 200) {
                    $('#personalInfoModal').modal('hide');
                    window.location.reload();
                } else {
                    $('#personalInfoModal').modal('hide');
                    alert(result.message);
                }
                ;
            },
            error: function () {
                alert('操作失败');
            }
        });
    });
</script>
</body>
</html>